<template>
	<view class="content ">
		<view class="boder-sa" :class="sa_bg" >
			<view class="cu-bar search chenge " :class="scrollTop<50 ? sa_bg : 'bg-wi'" style="position: fixed;top: 0px;width: 100%;z-index: 999;">
				<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big11010.jpg)"></view>
				<view class="search-form round text-center">
					<text class="icon-search"></text>
					<input :adjust-position="false" type="text" placeholder="搜索小说标题" confirm-type="search" @focus="Focus"></input>
				</view>
			</view>
			<view class="padding-bottom-xl" style="padding-top:100upx">
				<view class="flex justify-center">
					<view class="padding-lr-xl" @click="topcats('male')">男频</view>
					<view class="padding-lr-xl" @click="topcats('female')">女频</view>
				</view>
			</view>
		</view>

		<!-- <swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
		 :indicator-active-color="col" style="margin-top: -60upx;">
			<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''" style="padding: 20upx 0upx 70upx;">
				<view class="swiper-item shadow-warp ">
					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
					<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
				</view>
			</swiper-item>
		</swiper> -->
		
		<!-- <view :class="sa_bg" style="width: 100%;">公告栏预留</view> -->
		
		
		<view v-for="(item,index) in data" :key="index" class="margin-top-sm">
			<view  class="cu-bar bg-white" style="min-height: 68upx;font-weight: 550;" @click="ToList(index)">
				<view class="action">
					<text class="icon-title" :class="'text-'+col"></text> {{item.shortTitle}}
				</view>
				<view class="margin-right-sm text-gray" style="font-size: 12px;font-weight: 300;" >更多<text class="icon-right"></text></view>
			</view>
			
			<view class="margin-lr-sm grid col-4 grid-square"  >
				<view v-for="(value,key) in item.books" :key="key" style="height: 320upx;" @click="ToBook(value._id)"> 
					<image :src="value.cover" style="height: 210upx;" mode="scaleToFill"></image>
					<view class="text-cut" style="font-size: 26upx;line-height: 40upx;">{{value.title}}</view>
					<view class="text-gray" style="font-size: 24upx;line-height: 30upx;">作者:{{value.author}}</view>
				</view>
			</view>
		</view>

		<!-- 底边栏 -->
		<view style="height: 100upx;"></view>
		<bottom-bar TabCar="1" ></bottom-bar>
	</view>
	
	
	
</template>

<script>
	var that;
	export default {
		data() {
			return {
				saf:false,
				searchpush:null,
				dotStyle: false,
				cardCur: 0,
				data:[],
				sa_bg : 'bg-gradual-blue',
				sex : 'male',
				col : 'blue',
				scrollTop : 0,

				// swiperList: [{
				// 	id: 0,
				// 	type: 'image',
				// 	url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
				// }, {
				// 	id: 1,
				// 	type: 'image',
				// 	url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
				// }, {
				// 	id: 2,
				// 	type: 'image',
				// 	url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
				// }],
				
			}
		},
		
		async onReady() {
			uni.hideTabBar()
			var setting = await that.util.setting()
			// #ifdef H5
			var wx = await that.util.jssdk() 
			wx.ready(function () {	
				var sharedata = {
					title: setting.share_title,
					desc: setting.share_desc,
					imgUrl: setting.share_thumb,
					success: function(){
						
					},
					cancel: function(){							
					}
				};
				wx.onMenuShareAppMessage(sharedata);
				wx.onMenuShareTimeline(sharedata);						
			});
			// #endif
		},

		onLoad:function(){ 
			that = this
			var c_name = that.catsname
			uni.showLoading({
				title:'加载中'
			})
			that.util.get('VueConcourse')
			.then(res=>{
				that.data = res.list
				uni.hideLoading()
			})			
			// 轮播配置
			// that.TowerSwiper('swiperList');
		},
		
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		methods: {
			// 搜索条
			Focus(e){
				uni.navigateTo({
					url: '/pages/concourse/search'
				});
			},

			// 轮播js
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			// 书籍详情
			ToBook(e){
				uni.navigateTo({
					url: '/pages/book/book?id='+e
				});
			},
			// 排行榜
			ToList(e){
				var id = that.data[e]._id
				var title = that.data[e].shortTitle
				uni.navigateTo({
					url: '/pages/list/list?id='+id+'&title='+title
				});
			},
			
			topcats(e) {
				that = this
				that.util.request({
					'url' : 'VueConcourse',
					'data' : {
						sex : e,
					},
					success:function(res){
						that.data = res.data.data.list
						that.sa_bg = res.data.data.bg
						that.col = res.data.data.col
					}
				})
			},
			// towerSwiper
			// 初始化towerSwiper
			// TowerSwiper(name) {
			// 	let list = this[name];
			// 	for (let i = 0; i < list.length; i++) {
			// 		list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
			// 		list[i].mLeft = i - parseInt(list.length / 2)
			// 	}
			// 	this.swiperList = list
			// },
			
		}
	}
</script>

<style>
	page{background-color:#ffffff;}
	.card-swiper {
		height: 360upx !important;
		/* 宽高:180*305 */
	}
	
	.bg-wi {
		background-color: #fff;
	}
	
	.boder-sa{
		border-bottom-right-radius:35%;
		border-bottom-left-radius:35%;
	}
	
	.text-cut {
		white-space: nowrap;overflow: hidden;text-overflow:ellipsis; 
	}
	
	.chenge {
		opacity: 1;
    -webkit-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    overflow-x: hidden;
    overflow-y: auto;
    pointer-events: auto;
	}
	
</style>
